import React, { Component } from "react";
import "./notice.scss";
import { Modal } from "antd-mobile";
import IconAlarm from "../../images/yhLife/icon/icon-alarm.png";
import IconQuestion from "../../images/yhLife/icon/icon_question.png";
/**公告通知 */
class Notice extends Component {
	constructor(props) {
		super(props);
		this.state = {
			popupVisible: false
		};
		this.modalContent = `
            1.此活动是在新人礼包权益之外的限时参与的奖励
            2.首次完成页面信息提交可获得相应奖励，重复提交时不进行重复累计。
            3.累计奖励的过期日计算方式，首次申请日期 +15个自然日 与活动过期日取小值。
            4.有效期内的累计奖励将在您授信成功后自动兑换1张同等面值的小辉付现金优惠券到您的卡券包中。
            
            提醒：为了防止累计的奖励过期，建议您尽量在当日完成小辉付的申请流程。
        `;
	}
	componentDidMount() {}
	toggleModal = booleanValue => {
		// 设置
		this.setState({
			popupVisible: booleanValue
		});
	};
	render() {
		return (
			<div className="the-notice-container">
				<div className="notice-icon">
					<img alt="icon" src={IconAlarm} className="icon-alarm" />
				</div>
				<div className="notice-content">
					<div className="text">
						<div
							dangerouslySetInnerHTML={{
								__html: `${this.props.noticeContent}`
							}}
						/>
					</div>
					<div
						className="notice-question"
						onClick={() => this.toggleModal(true)}
					>
						<img alt="icon" src={IconQuestion} />
					</div>
				</div>

				<Modal
					visible={this.state.popupVisible}
					transparent
					maskClosable={true}
					onClose={() => this.toggleModal(false)}
					footer={[{ text: "确定", onPress: () => this.toggleModal(false) }]}
				>
					<div className="notice-modal-content">
						<p>1.此活动是在新人礼包权益之外的限时参与的奖励。</p>
						<p>
							2.首次完成页面信息提交可获得相应奖励，重复提交时不进行重复累计。
						</p>
						<p>
							3.累计奖励的过期日计算方式，首次申请日期 +15个自然日
							与活动过期日取小值。
						</p>
						<p>
							4.有效期内的累计奖励将在您授信成功后自动兑换1张同等面值的小辉付现金优惠券到您的卡券包中。
						</p>
						<h3>
							提醒：为了防止累计的奖励过期，建议您尽量在当日完成小辉付的申请流程。
						</h3>
					</div>
				</Modal>
			</div>
		);
	}
}
export default Notice;
